
<!-- 邀请页 -->
<template>
	<view class="invite-container">
		<!-- 海报区域 -->
		<view invite-posterBox>
			<image class="invite-container__poster" mode="widthFix" src="../../static/img/invite_bg@3x.png"></image>
		</view>

		<!-- 用户交互区域 -->
		<view class="invite-body">
			<view class="invite-bodyTop">
				<view class="invite-emphasis">
					<p class="invite-emphasis__title">输入邀请码·参与内测</p>

					<!-- 邀请码区域 -->
					<view class="invite-fakeBox">
						<input @blur="blurTextarea" @focus="focusTextarea" type="text" :maxlength="Invitation.extent" @input="indeedInput" v-model="indeedValue"/>
						<view class="invite-indeedBox">
							<view v-for="(item,index) in Invitation.extent" :key="index" class="invite-indeedBoxItem">
								<span>{{Invitation.value | filtCode(index)}}</span>
								<span
									:style="{backgroundColor: ((index == Invitation.value.length && isHotts) || (isHotts && Invitation.value.length == 0 && index == 0) || (isHotts && Invitation.value.length == Invitation.extent && index == (Invitation.extent-1))) ? 'rgba(241, 2, 0,0.9)' : '#dedede'}"></span>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 按钮区域 -->
			<view class="invite-bodyBottom" :style="{background : isTure ? '#222222' : 'rgba(34, 34, 34,.8)'}" @click.stop="send">
				<span>立即参加</span>
				<image mode="widthFix" src="../../static/img/button_right@3x.png" class="invite-bodyBottom__icon">
				</image>
			</view>
		</view>
	</view>
</template>

<script>
	import "@/static/scss/invite.scss"
	export default {
		data() {
			return {
				Invitation: {
					extent: 4,
					value: ""
				},
				isHotts: false,
				isTure: false,
				indeedValue: ''
			}
		},
		methods: {
			indeedInput(val){
				
				let newVal = val.detail.value.split('');
				console.log('初次=====>',newVal)
				let hold = [];
				let newStr = ""
				newVal.forEach((item,index)=>{
					if(/^[a-zA-Z\d]+$/.test(item)){
						hold.push(item.toUpperCase())
					}else{
						uni.showToast({
							icon:'none',
							title:'请勿输入非法字符'
						})
					}
				});
				this.indeedValue = "";
				    newStr = hold.join('');
				setTimeout(()=>{
					this.indeedValue = this.Invitation.value  = newStr;
					// this.$forceUpdate();
					console.log('输入====>',newStr,this.indeedValue,newVal);
				},0)
					
			
				
			},
			blurTextarea(e) {
				this.isHotts = false;
			},
			focusTextarea(e) {
				this.isHotts = true;
			},
			send(){
				if(this.isHot){
					// 请求接口
					this.$Api.accountInvite(this.Invitation.value).then(res=>{
						if(res.code == 200){
							uni.showToast({
								title: '参与成功',
							})
							setTimeout(()=>{
								uni.switchTab({
									url: "/pages/index/index"
								});
							},1500)
							
						}
					})
					
				}else{
					if(this.Invitation.value.trim().length == 0){
						uni.showToast({
							title: '请输入邀请码',
							icon: 'none'
						})
						this.indeedValue = ""
						this.Invitation.value = ""
					}else{
						uni.showToast({
							title: '邀请码不正确',
							icon: 'none'
						})
						this.indeedValue = ""
						this.Invitation.value = ""
					
					}
				}
			}
		},
		
		watch: {
			"Invitation.value": {
				handler(newVal, oldVal) {
					if (newVal.length == this.Invitation.extent) {
						// this.test()
						this.isTure = /^[A-Z\d]+$/.test(newVal);
						// console.log(isTure)
						if (this.isTure) {
							this.isHot = true;
						} else {
							this.isHot = false;
						}

					} else {
					 
						
						
						this.isHot = false;
						this.isTure = false;
					}
				},
				immediate: true
			},
			indeedValue: {
				handler(newVal, oldVal) {
					console.log('newValnewValnewVal====>',newVal)
					if (newVal.length == this.Invitation.extent) {
						// debugger
			
					} 
				},
				immediate: true
			}
		},
		filters: {
			filtCode(Val, index) {
				let newVal = Val.split('');
				// console.log('输出=====>', newVal)
				return newVal[index] ? newVal[index] : "";
			}
		}
	}
</script>

<style lang="scss">
</style>
